<template>
    <div class="integral">
        <header>积分商城管理</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="keywords">
                        <span>关键词：</span>
                        <el-input v-model.trim="input1" placeholder="请输入" style="width:300px;"></el-input>
                    </div>
                    <div class="status">
                        <span>类型：</span>
                        <el-select clearable v-model="value2" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets">重置</el-button>
                </div>
                <div class="add_market" style="margin-top:25px;">
                    <el-button type="danger" style="background:#e7251a;" @click.native="goAdd">添加优惠券</el-button>
                    <el-button @click.native="goDel">删除优惠券</el-button>
                </div>
                <div class="selected" v-if="selectArr.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="tables">
                    <el-table v-loading="loading" :data="actList" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50"> </el-table-column>
                        <el-table-column prop="SUBJECT" label="优惠券名称" width="250"> </el-table-column>
                        <el-table-column prop="CATEGORY" label="优惠券类型" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.CATEGORY==1">满减券</span>
                                <span v-else-if="scope.row.CATEGORY==2">兑换券</span>
                                <span v-else-if="scope.row.CATEGORY==3">服务券</span>
                                <span v-else-if="scope.row.CATEGORY==4">N元券</span>
                                <span v-else-if="scope.row.CATEGORY==5">折扣券</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="USERANGE" label="适用范围" width="200"> </el-table-column>
                        <el-table-column prop="AVAILDAYS" label="有效期限" width="200">
                            <template slot-scope="scope">
                                <span>{{scope.row.AVAILDAYS}}天</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="INTEGRAL" label="兑换条件" width="200">
                            <template slot-scope="scope">
                                <span>{{scope.row.INTEGRAL}}积分</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="options" label="操作" width="200">
                            <template slot-scope="scope">
                                <span class="dels" @click="goDel(scope.row.POINTEXCHANGEID)">删除</span>
                                <span class="edits" @click="goEdit(scope.row.POINTEXCHANGEID)">编辑</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
                </div>
            </div>
        </div>
        <!--添加优惠券-->
        <el-dialog title="添加优惠券" :visible.sync="dialog1" width="90%" style="margin-left:100px;">
            <div class="dialog_content">
                <div class="d_condition">
                    <div class="d_condition_1">
                        <p>商品名称：</p>
                        <el-input v-model.trim="input2" placeholder="请输入" style="width:300px;"></el-input>
                    </div>
                    <div class="d_condition_2">
                        <p>类型：</p>
                        <el-select clearable v-model="value3" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div class="d_condition_3">
                        <el-button type="danger" style="background:#e7251a;" @click.native="querys2">查询</el-button>
                        <el-button @click.native="resets2">重置</el-button>
                    </div>
                    <div class="d_condition_4">
                        <el-button type="danger" style="background:#e7251a;" @click.native="addT">新增优惠券</el-button>
                    </div>
                </div>
                <div class="d_selected" v-if="selectArr2.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr2.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="d_tables">
                    <el-table v-loading="loading2" :data="actList2" style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="80"> </el-table-column>
                        <el-table-column prop="SUBJECT" label="优惠券名称" width="250"> </el-table-column>
                        <el-table-column prop="CATEGORY" label="优惠券类型" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.CATEGORY==1">满减券</span>
                                <span v-else-if="scope.row.CATEGORY==2">兑换券</span>
                                <span v-else-if="scope.row.CATEGORY==3">服务券</span>
                                <span v-else-if="scope.row.CATEGORY==4">N元券</span>
                                <span v-else-if="scope.row.CATEGORY==5">折扣券</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="USERANGE" label="适用范围" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.USERANGE">{{scope.row.USERANGE}}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="validDate" label="期限（天）" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.Date" style="width:75px;" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="condition" label="兑换条件（分）" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.Score" style="width:75px;" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="page2" :page-sizes="[6, 8, 10]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="18"> </el-pagination>
                </div>
                <div class="d_button">
                    <el-button @click.native="dialog1=false">取消</el-button>
                    <el-button type="danger" style="background:#e7251a;" @click.native="adds">添加</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { deleteCashVolumeRecord } from '@/api/coupon'
    import { setCookie, getCookie, removeCookie } from '@/assets/js/cookie'
    import qs from 'qs'
    export default {
        name: 'integral',
        data() {
            return {
                input1: '', //关键字
                value2: '', //类型                            
                options2: [{
                    value: 1,
                    label: '满减劵'
                }, {
                    value: 2,
                    label: '兑换劵'
                }, {
                    value: 3,
                    label: '服务券'
                }, {
                    value: 4,
                    label: 'N元劵'
                }, {
                    value: 5,
                    label: '折扣劵'
                }],
                tableDatas: [],
                selectArr: [], //已选择的数组集合
                dialog1: false, //是否显示dialog
                input2: '', //商品名称
                value3: '', //类型
                options3: [{
                    value: 1,
                    label: '满减劵'
                }, {
                    value: 2,
                    label: '兑换劵'
                }, {
                    value: 3,
                    label: '服务券'
                }, {
                    value: 4,
                    label: 'N元劵'
                }, {
                    value: 5,
                    label: '折扣劵'
                }],
                selectArr2: [], //已选择的数组集合
                tableDatas2: [],
                loading: true,
                loading2: true,
                page1: 1, //当前页数
                pageSize1: 6, //每页多少条
                page2: 1, //当前页数
                pageSize2: 6, //每页多少条                
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                obj.PAGE_NO = this.page1;
                obj.PAGE_SIZE = this.pageSize1;
                this.input1 ? obj.LIKESTR = this.input1 : null;
                this.value2 ? obj.CATEGORY = this.value2 : null;
                return obj;
            },
            //分页数据
            actList() {
                if(this.tableDatas.POINTEXCHANGEARR) {
                    return this.tableDatas.POINTEXCHANGEARR;
                }
            },
            //优惠券 请求参数
            objs2() {
                let obj = {};
                obj.PAGE_NO = this.page2;
                obj.PAGE_SIZE = this.pageSize2;
                this.input2 ? obj.LIKESTR = this.input2 : null;
                this.value3 ? obj.CATEGORY = this.value3 : null;
                return obj;
            },
            //优惠券 分页数据
            actList2() {
                let arr = this.tableDatas2.CASHVOLUMERECORDARR;
                if(arr) {
                    arr.forEach(function(v) {
                        v.Date = 30; //创建一个期限字段
                        v.Score = 50; //创建一个兑换条件字段
                    })
                    return arr;
                }
            }
        },
        created() {        	
            this.getList();
            this.getTList();
        },
        methods: {
            //积分商城列表
            getList() {
                this.loading = true;
                this.$axiosPost('/4SCAFE/PointExchange/getPointExchangeList.action', this.objs).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.tableDatas = res;
                    }
                })
            },
            //优惠券列表
            getTList() {
                this.loading2 = true;
                this.$axiosPost('/4SCAFE/CashVolumeRecord/getCashVolumeRecordList.action', this.objs2).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.loading2 = false;
                        this.tableDatas2 = res;
                    }
                })
            },
            handleSelectionChange(val) {
                this.selectArr = val;
                //console.log(this.selectArr);
            },
            handleSizeChange(val) {
                this.loading = true;
                this.pageSize1 = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.page1 = val;
                this.getList();
            },
            //查询
            querys() {
                this.getList();
            },
            //重置
            resets() {
                this.input1 = this.value2 = '';
            },
            handleSelectionChange2(val) {
                this.selectArr2 = val;
                //console.log(this.selectArr2);
            },
            handleSizeChange2(val) {
                this.loading2 = true;
                this.pageSize2 = val;
                this.getTList();
            },
            handleCurrentChange2(val) {
                this.loading2 = true;
                this.page2 = val;
                this.getTList();
            },
            //查询
            querys2() {
                this.getTList();
            },
            //重置
            resets2() {
                this.input2 = this.value3 = '';
            },
            //添加优惠券
            goAdd() {
                this.dialog1 = true;
            },
            //删除
            goDel(id) {
                let ids = '',
                    arr = [],
                    str = '';
                if(typeof id === 'object' || typeof id === 'Object') { //批量删除 
                	if(this.selectArr.length === 0){
                		this.$alert('请选择优惠券','提示',{
                			confirmButtonText:'确定'
                		})
                		return;
                	}
                    this.selectArr.forEach(function(v) {
                        arr.push(v.POINTEXCHANGEID);
                    })
                    ids = arr.join();
                    str = '批量删除成功';
                } else { //单个删除
                    ids = id;
                    str = '删除成功';
                }
                //console.log(ids);
                this.$axiosPost('/4SCAFE/PointExchange/deletePointExchangeByIds.action', {
                    POINTEXCHANGE_IDS: ids
                }).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.$message({
                            type: 'success',
                            message: str
                        });
                        this.getList();
                    }
                })
            },
            //添加
            adds() {
                if(this.selectArr2.length === 0) {
                    this.$alert('请选择优惠券', '提示', {
                        confirmButtonText: '确定'
                    })
                    return;
                }
                let arr = JSON.parse(JSON.stringify(this.selectArr2)),
                    obj = {};
                arr.forEach(function(v) {
                    delete v.CATEGORY;
                    delete v.EXPDATE;
                    delete v.NUM;
                    delete v.STARTDATE;
                    delete v.STATUS;
                    delete v.USERANGE;
                    v.AVAILDAYS = +v.Date;
                    v.INTEGRAL = +v.Score;
                    delete v.Date;
                    delete v.Score;
                })
                //console.log(arr);return;
                obj.POINTEXCHANGEARR = JSON.stringify(arr);
                if(getCookie('flag')) {
                    return false;
                }
                this.$axiosPost('/4SCAFE/PointExchange/batchAddPointExchange.action', obj).then(res => {
                    //console.log(res);
                    setCookie('flag', 1);
                    if(res.STATUS_CODE === 1) {
                        removeCookie('flag');
                        this.$message.success('添加成功');
                        this.dialog1 = false;
                        this.getList();
                    }
                })
            },
            //编辑优惠券
            goEdit(id) {
                this.$router.push({
                    path: '/functions/editIntegral/' + id
                });
            },
            //新增优惠券
            addT() {
                this.$router.push({
                    path: '/functions/addIntegral'
                });
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .integral {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 25px;
            background: #fff;
            .conditions {
                span {
                    white-space: nowrap;
                }
                .condition_1 {
                    display: flex;
                    .status {
                        margin: 0 35px;
                    }
                }
                .selected {
                    margin-top: 15px;
                    border: 1px solid #f0f0f0;
                    border-radius: 5px;
                    background: #fafafa;
                    p {
                        display: flex;
                        align-items: center;
                        img {
                            width: 20px;
                            height: 20px;
                            margin: 0 10px;
                        }
                        span {
                            font-size: 16px;
                            color: #717a7d;
                            label {
                                color: #e7251a;
                            }
                        }
                    }
                }
                .tables {
                    margin-top: 15px;
                    .el-pagination {
                        text-align: center;
                        margin-top: 30px;
                    }
                    .dels, .edits {
                        color: #1d93ff;
                        cursor: pointer;
                        margin: 0 2px;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        .dialog_content {
            border-top: 1px solid #f0f0f0;
            margin-top: 10px;
            padding-top: 25px;
            .d_condition {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 25px;
                .d_condition_1, .d_condition_2, .d_condition_3 {
                    display: flex;
                    align-items: center;
                }
                .d_condition_1 {
                    margin-left: -50px;
                }
            }
            .d_selected {
                width: 98%;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                margin-bottom: 10px;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .d_tables {
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
            }
            .d_button {
                width: 95%;
                display: flex;
                justify-content: flex-end;
                margin: 18px 0 8px 0;
            }
        }
    }
</style>